<style>
  li{
    border-bottom:#ad3 1px dashed;
  }
 .remove{
    margin-left:30px;
    text-decrotation:none;
    
  }
</style>
<button type="button" id="addatt">增加</button><button id="saveath">保存附件</button>
<ul>
<#list beans as att>
    
	<li style="width:300px">
		<span>↓<a href="admin/attachment/attachment!download?bean.id=${att.id}"	target="selfFrame">${att.name}</a></span>
	    <a class='remove' href="javascript:;" target="selfFrame" url="admin/attachment/attachment!removeappend?workflowId=#{workflowId}&amp;bean.id=${att.id}">
	    <img style="border:none;margin-top:8px;float:right" src="${sbase}images/removeme.gif"/></a>
	</li>
</#list>
</ul>
<form id="appendActForm" action="admin/attachment/attachment!append" target="selfFrame"
		method="post" enctype="multipart/form-data" onsubmit="return checkform();">
		<input type="hidden" name="workflowId" value="#{workflowId}" />
  		<ul id="filelist"></ul>
</form>

<iframe style="display:none;width:0px;height:0px" name="selfFrame"></iframe>
<script language="javascript">
     $(function(){
	      $("#addatt").click(function(){
		      var li = $("<li></li>");
			  var f = $("<input type='file' name='upLoads'></input>");
			  var b = $("<a href='javascript:;'><img src='${sbase}images/removeme.gif' style='border:none'/></a>").click(function(){
			      $(this).parent().remove();
			  }).css({"color":"red","font-size":"25px","margin-left":"10px"});
		      li.append(f);
		      li.append(b);
			  $("#filelist").append(li);
		  });
	     $("#saveath").bind("click",function(){
	          $("#appendActForm").submit();
	     
	     });
		
		 $("a.remove").click(function(){
		      if(!confirm("删除此附件??"))return ;
		      var url = $(this).attr("url");
			  $(this).parent().parent().remove();
			  $.ajax({
			     url:url,
			     success:function(){
			       parent.showAtts();	
				 }
			  });
		 });	

		 
	 });
	 
	 function checkform(){
	    var s = $("#filelist").children().size();
	    return !(s==0);
	 }
</script>